<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户权限管理</title>
    <script type="text/javascript" src="/public/common.js"></script>
    <script type="text/javascript" src="/public/sose/js/checkViewPermissions.js"></script>
</head>
<body>
<div class="layout-body" id="user" v-cloak>
    <layout-header></layout-header>
    <div id="wrap">
        <layout-sider></layout-sider>
        <div class="layout-main">
            <!-- 多条件查询 -->
            <div class="qry">
                <div class="first">
                    <div class="butRight">
                        <span class="juinline">
                                用户名称:
                            <el-input class="input" v-model.trim="sUserRole.userName"
                                      type="text"></el-input>
                        </span>
                    </div>
                    <div class="butRight">
                        <i-button type="primary" icon="ios-search" @click="filter">搜索</i-button>
                        <i-button @click="clearSUserRole">清空</i-button>
                    </div>
                    <div class="butRight-button">
                        <i-button type="info" shape="circle" @click="resetRedis">重置缓存</i-button>
                    </div>
                </div>
                <div class="butLeft">
                    <!-- <i-Button type="primary" @click="addUserRoleModal = true">新增用户</i-Button> -->
                    <i-button @click="openRemoveUserRoleSelectModal">批量删除</i-button>
                </div>
            </div>
            <div>
                <i-table class="table" border height="auto" size='small' :columns="column"
                         :data="nowData" :loading="loading" highlight-row="true"
                         @on-selection-change="onSelectionChange">
                    <template
                            slot-scope="{ row, index }" slot="action">
                        <!-- <a class="table-a" @click="openUpdatePasswordModal(index)"> 修改密码 </a> -->
                        <a class="table-a" @click="openEditUserRoleModal(index)"> 修改角色 </a>
                        <a @click="openRemoveUserRoleModal(index)">删除用户</a>
                    </template>
                </i-table>

                <div class="div-inline-left">
                    <span v-show="selection.length >0">已勾选 {{selection.length}} 条</span>
                </div>
                <div class="div-inline-right">
                    <Page :current="pageNum" :total="totalNum" :page-size="pageSize"
                          @on-change="onPageChange"
                          @on-page-size-change="onPageSizeChange" show-total show-elevator
                          show-sizer></Page>
                </div>
            </div>
        </div>

        <!-- 新增模态框 -->
        <Modal v-model="addUserRoleModal" :mask-closable="false" @on-cancel="cancelAddUserRole">
            <p slot="header">
                <span>新增用户</span>
            </p>
            <center>
                <table>
                    <tr>
                        <td>用户名:</td>
                        <td>
                            <i-input type="text" placeholder="请输入用户名" v-model="userRole.userName" size="large" clearable
                                     class="input"/>
                        </td>

                    </tr>
                    <tr>
                        <td>登陆密码:</td>
                        <td>
                            <i-input type="password" placeholder="请输入密码" v-model="userRole.password" size="large"
                                     clearable
                                     class="input"/>
                        </td>
                    </tr>

                    <tr>
                        <td>密码确认:</td>
                        <td>
                            <i-input type="password" placeholder="请再次输入密码" v-model="userRole.password1" size="large"
                                     clearable="true"
                                     class="input"/>
                        </td>
                    </tr>

                    <tr>
                        <td>角色名称:</td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td>
                            <el-input class="input" type="textarea" v-model.trim="userRole.remark"
                                      maxlength="2000" :autosize="{minRows: 2,maxRows: 4}"
                                      show-word-limit></el-input>
                        </td>
                    </tr>
                </table>
            </center>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelAddUserRole">取消</i-button>
                <i-button type="primary" size="large" @click="addUserRole">确认</i-button>
            </div>
        </Modal>

        <!-- 编辑模态框 -->
        <Modal v-model="editUserRoleModal" :mask-closable="false"
               @on-cancel="cancelEditUserRole">
            <p slot="header">
                <span>编辑用户角色</span>
            </p>
            <center>
                <table>
                    <tr>
                        <td>用户名称:</td>
                        <td>
                            <i-input type="text" v-model="userRole.userName" size="large" readonly
                                     class="input"/>
                        </td>
                    </tr>
                    <tr>
                        <td>角色名称:</td>
                        <td>
                            <el-select v-model="ownRoleIdList" class="input" filterable multiple clearable>
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.id"
                                        :label="item.roleName"
                                        :value="item.id">
                                    <span style="float: left">{{ item.roleName }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.roleKey }}</span>
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </center>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelEditUserRole">取消</i-button>
                <i-button type="primary" size="large" @click="editUserRole">确定</i-button>
            </div>
        </Modal>

        <!-- 修改密码模态框 -->
        <Modal v-model="updatePasswordModal" :mask-closable="false"
               @on-cancel="cancelUpdatePassword">
            <p slot="header">
                <span>修改用户密码</span>
            </p>
            <center>
                <table>
                    <tr>
                        <td>登陆密码:</td>
                        <td>
                            <i-input type="password" placeholder="请输入密码" v-model="userRole.password" size="large"
                                     clearable
                                     class="input"/>
                        </td>
                    </tr>

                    <tr>
                        <td>密码确认:</td>
                        <td>
                            <i-input type="password" placeholder="请再次输入密码" v-model="userRole.password1" size="large"
                                     clearable="true"
                                     class="input"/>
                        </td>
                    </tr>
                </table>
            </center>
            <div slot="footer">
                <i-button type="text" size="large" @click="cancelUpdatePassword">取消</i-button>
                <i-button type="primary" size="large" @click="updatePassword">确定</i-button>
            </div>
        </Modal>

        <!-- 删除模态框 -->
        <Modal v-model="removeUserRoleModal" title="删除用户"
               @on-ok="removeUserRole" :mask-closable="false">
            <p>确定删除该用户？删除后原有内容将不再进行保存</p>
        </Modal>
        <!-- 批量删除模态框 -->
        <Modal v-model="removeUserRoleSelectModal" title="批量删除用户"
               @on-ok="removeUserRoleSelect" :mask-closable="false">
            <p>确定删除当前{{selection.length}}条用户？删除后原有内容将不再进行保存</p>
        </Modal>
    </div>
    <div style="clear: both"></div>
    <layout-footer></layout-footer>
</div>
<script type="text/javascript" src="/templates/config/js/user.js"></script>
</body>
</html>
